<template>
  <div class="app-container calendar-list-container user-container">
    <div class="filter-container">
      <el-form>
        <el-row v-for="(condition, index) in conditionList" v-if='index%conditionLayout===0'
                :key=index class="row-bg"
                justify="space-around"
                type="flex">
          <el-col v-for="(item, pos) in [1,2,3,4,5,6,7,8].slice(0, conditionLayout)" :key=pos
                  :span="24/conditionLayout">
            <div v-if="conditionList[index+pos] !== undefined">
              <el-form-item :label="getLayoutDisplay(conditionList[index+pos].property)" class="conditionItem">
                <el-input v-if="getLayoutDataType(conditionList[index+pos].property)===dataType.input"
                          v-model="conditionList[index+pos].value"
                          :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"
                          :placeholder="getConditionRelationDisplay(conditionList[index+pos].relation)"/>
                <el-switch
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.boolean"
                  v-model="conditionList[index+pos].value"
                  :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"/>
                <el-input-number
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.inputNumber"
                  v-model="conditionList[index+pos].value"
                  :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"
                  placeholder=""
                  size="small"/>
                <el-date-picker
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.date && conditionList[index+pos].relation < 10"
                  v-model="conditionList[index+pos].value"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-date-picker
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.datetime && conditionList[index+pos].relation < 10"
                  v-model="conditionList[index+pos].value"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-date-picker
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.date && conditionList[index+pos].relation >= 10"
                  v-model="conditionList[index+pos].valueList"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                  end-placeholder="结束日期"
                  range-separator="-"
                  size="mini"
                  start-placeholder="开始日期"
                  style="width:300px"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-date-picker
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.datetime && conditionList[index+pos].relation >= 10"
                  v-model="conditionList[index+pos].valueList"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                  end-placeholder="结束日期"
                  range-separator="-"
                  size="mini"
                  start-placeholder="开始日期"
                  style="width:300px"
                  type="datetimeragne"
                  value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-select
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.select"
                  v-model="conditionList[index+pos].value"
                  :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"
                  :multiple="conditionList[index+pos].relation === 10 || conditionList[index+pos].relation === 11"
                  clearable>
                  <el-option v-for="(dict, index) in optionMap.get(conditionList[index+pos].property)"
                             :key="index"
                             :label="dict.label"
                             :value="dict.value"/>
                </el-select>
                <el-cascader
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.cascader && !(conditionList[index+pos].relation === 10 || conditionList[index+pos].relation === 11)"
                  v-model="conditionList[index+pos].value"
                  :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"
                  :options="optionMap.get(conditionList[index+pos].property)"
                  :props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false}"
                  :show-all-levels="false"
                  clearable
                  size="mini">
                </el-cascader>
                <el-cascader
                  v-else-if="getLayoutDataType(conditionList[index+pos].property)===dataType.cascader && (conditionList[index+pos].relation === 10 || conditionList[index+pos].relation === 11)"
                  v-model="conditionList[index+pos].valueList"
                  :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"
                  :options="optionMap.get(conditionList[index+pos].property)"
                  :props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false, multiple: true}"
                  :show-all-levels="false"
                  clearable
                  size="mini">
                </el-cascader>
                <el-input v-else
                          v-model="conditionList[index+pos].value"
                          :disabled="conditionList[index+pos].relation === 6 || conditionList[index+pos].relation === 7"/>
                <el-button v-show="manageCondition" icon="el-icon-circle-close" size="mini"
                           @click="removeCondition(index+pos)"/>
              </el-form-item>
            </div>
            <span v-else/>
          </el-col>
        </el-row>
        <el-row :gutter="0" class="cutOffLine">
          <div class="buttonGroup">
            <el-button size="small" type="success" @click="queryData">
              <icon name="search"/>
              查询
            </el-button>
            <el-popover
              v-if="manageRefresh && model.refreshButton"
              v-model="changeTipsVisible"
              content="请点击生效按钮,不点击所有修改不生效"
              placement="bottom"
              popper-class="popover"
              title="点击↑"
              trigger="manual"
              width="300">
              <el-button slot="reference" size="small" type="primary" @click="refresh">
                <icon name="refresh"/>
                生效
              </el-button>
            </el-popover>
          </div>
        </el-row>
        <el-row v-if="!model.readOnly" :gutter="0"
                class="cutOffLine">
          <el-col :span="12">
            <el-button v-for="(customButton, index) in customButtonList['left']"
                       v-show="customButton.show"
                       :key="index"
                       :disabled="customButton.disabled"
                       :type="isEmpty(customButton.type) ? 'primary' : customButton.type"
                       size="small"
                       @click="$emit(customButton.handler)">
              <icon v-if="isNotEmpty(customButton.icon)" :name="customButton.icon"/>
              <span>{{ customButton.name }}</span>
            </el-button>
            <el-button v-if="addButton.show && model.addButton"
                       :disabled="addButton.disabled"
                       :type="addButton.type"
                       size="small"
                       @click="editDialogOpen('ADD')">
              <icon :name="addButton.icon"/>
              {{ addButton.name }}
            </el-button>
            <el-button
              v-if="modifyButton.show && model.modifyButton"
              :disabled="currentRow == null || (currentRow && layout[0] && !currentRow[layout[0].property]) || (modifyButton.disabled != null && modifyButton.disabled)"
              :type="copyButton.type" size="small"
              @click="editDialogOpen('MODIFY')">
              <icon :name="modifyButton.icon"/>
              {{ modifyButton.name }}
            </el-button>
            <el-button
              v-if="copyButton.show && model.copyButton"
              :disabled="currentRow == null || (currentRow && layout[0] && !currentRow[layout[0].property]) || (copyButton.disabled != null && copyButton.disabled)"
              :type="copyButton.type" size="small"
              @click="editDialogOpen('COPY')">
              <icon :name="copyButton.icon"/>
              {{ copyButton.name }}
            </el-button>
            <el-button
              v-if="disableButton.show && model.disableButton"
              :disabled="currentRow == null || (currentRow && layout[0] && !currentRow[layout[0].property]) || (disableButton.disabled != null && disableButton.disabled)"
              :type="disableButton.type" size="small"
              @click="handleDisable()">
              <icon :name="disableButton.icon"/>
              {{ disableButton.name }}
            </el-button>
            <el-button
              v-if="deleteButton.show  && model.deleteButton"
              :disabled="currentRow == null || (currentRow && layout[0] && !currentRow[layout[0].property]) || (deleteButton.disabled != null && deleteButton.disabled)"
              :type="deleteButton.type" size="small"
              @click="handleDelete()">
              <icon :name="deleteButton.icon"/>
              {{ deleteButton.name }}
            </el-button>
            <span>&nbsp;</span>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-button v-for="(customButton, index) in customButtonList['right']"
                       v-show="customButton.show"
                       :key="index"
                       :disabled="customButton.disabled"
                       :type="isEmpty(customButton.type) ? 'primary' : customButton.type"
                       size="small"
                       @click="$emit(customButton.handler)">
              <icon v-if="isNotEmpty(customButton.icon)" :name="customButton.icon"/>
              <span>{{ customButton.name }}</span>
            </el-button>
            <div v-if="model.uploadButton">
              <el-upload v-if="manageImport"
                         :http-request="uploadExcel"
                         :show-file-list="false"
                         action
                         style="display: inline-block;">
                <el-button :disabled="sync.visible"
                           icon="el-icon-upload"
                           size="small"
                           type="primary">
                  表格导入
                </el-button>
              </el-upload>
              <el-button v-if="manageImport"
                         size="small" type="primary" @click="downloadTemplate">
                <icon name="file-excel-o"/>
                模板下载
              </el-button>
            </div>
            <el-progress v-if="sync.visible" :percentage="sync.percent" :stroke-width="18" :text-inside="true"
                         style="padding-top: 10px"/>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <slot v-if="customTable" name="custom-table"/>
    <el-table
      v-else
      ref="singleTable"
      v-loading="loading"
      :data="dataList"
      :highlight-current-row="!multiSelect"
      :row-class-name="tableRowClassName"
      border
      class="queryClass"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加载中"
      stripe
      @current-change="handleCurrentChange"
      @row-dblclick="doubleClickModify ? editDialogOpen('MODIFY') : () => {}"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange">
      <el-table-column
        v-if="multiSelect"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="(column) in layout"
        v-if="(!column.hidden || isAdmin()) && !column.writeOnly"
        :key="column.key"
        :label="column.displayName"
        :min-width=formLabelWidth
        :prop="column.property"
        :show-overflow-tooltip="true"
        :width="column.width"
        align="center"
        sortable="custom"
        style="height: 200%">
        <template slot-scope="scope">
          <p v-if="column.dataType === dataType.html" v-html="scope.row[column.property]"/>
          <span v-else slot="reference">{{ scope.row | combination(column.property) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="buttonList.length>0"
        :fixed="tableSumWidth > tableClientWidth?'right':false"
        align="center"
        label="操作"
        style="height: 200%"
        width="170">
        <template slot-scope="scope">
          <el-popover placement="bottom" trigger="click">
            <div v-for="(item,index) in buttonList" :key="item.name" style="text-align:center;">
              <el-button type="text" @click="handleOperate(index)">
                {{ item.name }}
              </el-button>
            </div>
            <el-button slot="reference">点击展开</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="model.exportButton" class="exportButton">
      <el-button v-if="manageExport" size="small" style="margin-top: 20px;" type="success" @click="exportQueryData">
        <icon name="download"/>
        导出
      </el-button>
    </div>
    <el-pagination :current-page="page.current"
                   :page-size="page.size"
                   :total="page.total"
                   class="paging"
                   layout="total, sizes, prev, pager, next, jumper"
                   small
                   @click.native="conditionManageButtonClick"
                   @current-change="handleCurrentPageChange"
                   @size-change="handleSizeChange">
    </el-pagination>
    <el-dialog :title="editDialog.title"
               :visible.sync="editDialog.visible"
               width="60%">
      <el-row>
        <el-col :span="12">
          <el-form ref="editDialogForm" :model="editDialog.editData" :rules="rules" class="filter-container"
                   label-width="80px">
            <el-row
              v-for="(field, index) in layout"
              v-if="!field.hidden || isAdmin()"
              :key="index" justify="space-around"
              type="flex">
              <el-col class="editDialogForm">
                <el-form-item v-show="!field.readOnly" :label="field.displayName" :prop="field.property">
                  <el-input v-if="field.dataType === dataType.input"
                            v-model="editDialog.editData[field.property]"
                            :disabled="field.readOnly"
                            @input="$forceUpdate()"/>
                  <el-switch v-else-if="field.dataType === dataType.boolean"
                             v-model="editDialog.editData[field.property]"
                             :disabled="field.readOnly"/>
                  <el-input-number v-else-if="field.dataType === dataType.inputNumber"
                                   v-model="editDialog.editData[field.property]"
                                   :disabled="field.readOnly"
                                   placeholder=""
                                   size="small"/>
                  <el-date-picker v-else-if="field.dataType === dataType.date"
                                  v-model="editDialog.editData[field.property]"
                                  :disabled="field.readOnly" format="yyyy年MM月dd日"
                                  type="date"
                                  value-format="yyyy-MM-dd"/>
                  <el-date-picker v-else-if="field.dataType === dataType.datetime"
                                  v-model="editDialog.editData[field.property]"
                                  :disabled="field.readOnly" format="yyyy年MM月dd日 HH:mm:ss"
                                  type="datetime"
                                  value-format="yyyy-MM-dd HH:mm:ss"/>
                  <el-select v-else-if="field.dataType === dataType.select"
                             v-model="editDialog.editData[field.property]"
                             :disabled="field.readOnly"
                             @change="$forceUpdate()">
                    <el-option v-for="(dict, index) in optionMap.get(field.property)"
                               :key="index"
                               :label="dict.label"
                               :value="dict.value"/>
                  </el-select>
                  <el-cascader
                    v-else-if="field.dataType === dataType.cascader"
                    v-model="editDialog.editData[field.property]"
                    :disabled="field.readOnly"
                    :options="optionMap.get(field.property)"
                    :props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false}"
                    :show-all-levels="false"
                    clearable
                    @change="$forceUpdate()">
                  </el-cascader>
                  <div v-else-if="field.dataType === dataType.upload" class="filter-item"
                       style="display:inherit;">
                    <el-input v-model="editDialog.editData[field.property]"/>
                    <el-upload :http-request="uploadData"
                               :on-success="handleUploadSuccess"
                               :show-file-list="false"
                               action
                               style="display: inline-block;">
                      <el-button icon="el-icon-upload" size="small"
                                 style="height: 32px"
                                 type="primary"
                                 @click="editDialog.currentUploadProperty = field.property"/>
                    </el-upload>
                  </div>
                  <el-input v-else
                            v-model="editDialog.editData[field.property]"
                            :disabled="field.readOnly"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col v-if="model.treeFormat" :span="12">
          <div style="padding-bottom: 10px;padding-left: 10px">所属父分类</div>
          <el-tree
            ref="editDialogTree"
            :check-strictly="true"
            :data="dataTree"
            :default-checked-keys="editDialog.tree.checkedKeys"
            :default-expanded-keys="editDialog.tree.expandedKeys"
            :filter-node-method="editDialogTreeFilterNode"
            :props=" { children: 'subList', label: 'displayName' }"
            node-key="id"
            show-checkbox
            @check="editDialogTreeCheckedChange">
          </el-tree>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDialogConfirm(editDialog.type)">确 定</el-button>
        <el-button @click="editDialogClose()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const EQUAL = {label: '等于', value: 0, display: ''}
const NOT_EQUAL = {label: '不等于', value: 1, display: '不同于查询内容'}
const GREATER = {label: '大于', value: 2, display: '大于查询内容'}
const GREATER_AND_EQUAL = {label: '大于等于', value: 3, display: '大于或等于查询内容'}
const LESS = {label: '小于', value: 4, display: '小于查询内容'}
const LESS_AND_EQUAL = {label: '小于等于', value: 5, display: '小于或等于查询内容'}
const IS_NULL = {label: '空', value: 6, display: '为空'}
const NOT_NULL = {label: '非空', value: 7, display: '不为空'}
const LIKE = {label: '模糊', value: 8, display: '包含查询内容'}
const MULTI = {label: '介于', value: 10, display: '位于查询内容列表中'}
const NOT_MULTI = {label: '不介于', value: 11, display: '不在查询内容列表中'}
// const NOT_EQUAL_OR_NULL = {label: '不等于或为空', value: 12}
const BETWEEN = {label: '时间介于之间', value: 13, display: '介于之间'}
const NOT_BETWEEN = {label: '时间介于之外', value: 14, display: '介于之外'}
const BETWEEN_OR_EQUAL = {label: '时间介于之间(包含)', value: 15, display: '介于之间(包含)'}
const NOT_BETWEEN_AND_EQUAL = {label: '时间介于之外(不包含)', value: 16, display: '介于之外(不包含)'}

const defaultButton = {
  show: false,
  disabled: true,
  type: 'primary',
  name: '按键示例',
  icon: '',
  function: (data) => {
    console.log(data)
  }
}
export default {
  name: 'managePage',
  props: {
    /** ===========全局配置============= **/
    conditionLayout: {
      type: Number,
      default: () => {
        return 2
      }
    },
    autoQuery: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    basePath: {
      type: String,
      default: () => {
        return ''
      }
    },
    defaultQueryParam: {
      type: Object,
      default: () => {
        return null
      }
    },
    defaultConditionParam: {
      type: Array,
      default: () => {
        return []
      }
    },
    customerQueryFunction: {
      type: String,
      default: () => {
        return null
      }
    },
    manageCondition: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    manageRefresh: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    addButton: {
      type: Object,
      default: () => {
        return {
          default: true,
          show: false,
          disabled: false,
          type: 'primary',
          name: '新增',
          icon: 'plus',
          function: null
        }
      }
    },
    copyButton: {
      type: Object,
      default: () => {
        return {
          default: true,
          show: false,
          disabled: null,
          type: 'primary',
          name: '复制',
          icon: 'copy',
          function: null
        }
      }
    },
    deleteButton: {
      type: Object,
      default: () => {
        return {
          default: true,
          show: false,
          disabled: null,
          type: 'danger',
          name: '删除',
          icon: 'trash',
          function: null
        }
      }
    },
    disableButton: {
      type: Object,
      default: () => {
        return {
          default: true,
          show: false,
          disabled: null,
          type: 'warning',
          name: '失效',
          icon: 'trash',
          function: null
        }
      }
    },
    modifyButton: {
      type: Object,
      default: () => {
        return {
          default: true,
          show: false,
          disabled: null,
          type: 'primary',
          name: '修改',
          icon: 'edit',
          function: null
        }
      }
    },
    doubleClickModify: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    manageImport: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    manageExport: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    leftButton1: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    leftButton2: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    leftButton3: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    leftButton4: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    leftButton5: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    rightButton1: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    rightButton2: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    rightButton3: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    rightButton4: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    rightButton5: {
      type: Object,
      default: () => {
        return JSON.parse(JSON.stringify(defaultButton))
      }
    },
    multiSelect: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    customTable: {
      type: Boolean,
      default: false
    },
    buttonList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    basePath: {
      handler(newValue, oldValue) {
        if (newValue !== '') {
          this.initModel()
        }
      },
      deep: true
    },
    leftButton1: {
      handler(newValue, oldValue) {
        this.initCustomButton('left', 1)
      },
      deep: true
    },
    leftButton2: {
      handler(newValue, oldValue) {
        this.initCustomButton('left', 2)
      },
      deep: true
    },
    leftButton3: {
      handler(newValue, oldValue) {
        this.initCustomButton('left', 3)
      },
      deep: true
    },
    leftButton4: {
      handler(newValue, oldValue) {
        this.initCustomButton('left', 4)
      },
      deep: true
    },
    leftButton5: {
      handler(newValue, oldValue) {
        this.initCustomButton('left', 5)
      },
      deep: true
    },
    rightButton1: {
      handler(newValue, oldValue) {
        this.initCustomButton('right', 1)
      },
      deep: true
    },
    rightButton2: {
      handler(newValue, oldValue) {
        this.initCustomButton('right', 2)
      },
      deep: true
    },
    rightButton3: {
      handler(newValue, oldValue) {
        this.initCustomButton('right', 3)
      },
      deep: true
    },
    rightButton4: {
      handler(newValue, oldValue) {
        this.initCustomButton('right', 4)
      },
      deep: true
    },
    rightButton5: {
      handler(newValue, oldValue) {
        this.initCustomButton('right', 5)
      },
      deep: true
    }
  },
  data() {
    return {
      changeTipsVisible: false,
      /** ===========全局配置============= **/
      model: {
        id: '',
        path: '',
        name: '',
        readOnly: true,
        treeFormat: false,
        idField: '',
        pidField: '',

        addButton: false,
        modifyButton: false,
        copyButton: false,
        disableButton: false,
        deleteButton: false,
        exportButton: false,
        importButton: false,
        refreshButton: false
      },
      /** ===========搜索条件列表============= **/
      dataType: {
        input: 'STRING',
        inputNumber: 'NUMBER',
        boolean: 'BOOLEAN',
        select: 'ENUM',
        cascader: 'TREE',
        date: 'DATE',
        datetime: 'DATETIME',
        upload: 'LINK',
        html: 'HTML',
        textArea: 'TEXT'
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      conditionRelationMap: {},
      defaultCondition: {
        status: false,
        property: '',
        value: undefined,
        relation: null
      },
      conditionList: [],
      sortCondition: {
        property: '',
        type: 0
      },
      conditionManageButtonClickTime: 0,
      conditionManageButtonClickTimer: null,
      /** ===========搜索条件列表============= **/

      /** ===========页面配置============= **/
      customButtonList: [],
      layout: [],
      optionMap: new Map(),
      rules: {},
      /** ===========页面配置============= **/

      /** ===========数据显示============= **/
      dataList: [],
      dataTree: [],
      currentRow: null,
      // 分页信息
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      formLabelWidth: '100px',
      loading: false,
      sync: {
        timer: null,
        visible: false,
        percent: 0.0,
        real: 0.0,
        compensation: 0.0
      },
      /** ===========数据显示============= **/

      /** ===========添加修改弹框============= **/
      editDialog: {
        type: '',
        title: '',
        visible: false,
        editData: {},
        currentUploadProperty: '',
        tree: {
          subIdArray: [],
          expandedKeys: [],
          checkedKeys: []
        }
      },
      tableClientWidth: null,
      tableSumWidth: null
    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    log(comment, data) {
      console.log(comment, data)
      return data !== undefined
    },
    isAdmin() {
      return false
      // return this.getLocalStorage('operator') === '000001'
    },
    init() {
      this.page = {
        total: 0,
        current: 1,
        size: 10
      }
      this.loading = false
      this.initConditionRelationMap()
      this.initAllCustomButton()
      if (this.basePath !== '') {
        this.initModel()
      }
    },
    initModel() {
      this.queryModel().then(() => {
        if (this.addButton.default) {
          this.addButton.show = this.model.addButton
          this.addButton.function = this.addButtonHandler
        }
        if (this.modifyButton.default) {
          this.modifyButton.show = this.model.modifyButton
          this.modifyButton.function = this.modifyButtonHandler
        }
        if (this.copyButton.default) {
          this.copyButton.show = this.model.copyButton
          this.copyButton.function = this.copyButtonHandler
        }
        if (this.disableButton.default) {
          this.disableButton.show = this.model.disableButton
          this.disableButton.function = this.disableButtonHandler
        }
        if (this.deleteButton.default) {
          this.deleteButton.show = this.model.deleteButton
          this.deleteButton.function = this.deleteButtonHandler
        }

        this.dataTree = []
        this.dataList = []
        this.queryLayout()
        this.initCondition()
        this.queryTree()
        if (this.autoQuery) {
          this.queryData()
        }
      })
    },
    conditionManageButtonClick() {
      if (!this.isAdmin()) {
        return
      }
      clearInterval(this.conditionManageButtonClickTimer)
      this.conditionManageButtonClickTimer = setTimeout(() => {
        this.conditionManageButtonClickTime = 0
      }, 2000)
      this.conditionManageButtonClickTime++
      if (this.conditionManageButtonClickTime === 10) {
        this.manageCondition = true
        clearInterval(this.conditionManageButtonClickTimer)
      }
    },
    initAllCustomButton() {
      const positionArray = ['left', 'right']
      for (let index in positionArray) {
        const position = positionArray[index]
        this.customButtonList[position] = []
        for (let i = 1; i <= 5; i++) {
          this.initCustomButton(position, i)
        }
      }
    },
    initCustomButton(position, index) {
      const button = this.getCustomButtonFieldName(position, index, '')
      if (this[`${button}`] !== undefined) {
        this.$set(this.customButtonList[position], index - 1, {
          show: this[`${button}`].show || false,
          name: this[`${button}`].name,
          icon: this[`${button}`].icon,
          type: this[`${button}`].type,
          disabled: this[`${button}`].disabled,
          handler: this[`${button}`].function
        })
      }
      this.$forceUpdate()
    },
    getCustomButtonFieldName(position, index, field) {
      return position + 'Button' + index + field
    },
    /** ===========表头配置============= **/
    queryModel() {
      const _this = this
      return new Promise((resolve, reject) => _this.fetch(_this.manageApiType(_this.basePath, 'MODEL'), null, null, respData => {
        _this.model = {
          path: this.basePath,
          ...respData.data,
          readOnly: respData.data.readOnly === '1',
          treeFormat: respData.data.readOnly === '1',
          addButton: respData.data.addButton === '1',
          modifyButton: respData.data.modifyButton === '1',
          copyButton: respData.data.copyButton === '1',
          disableButton: respData.data.disableButton === '1',
          deleteButton: respData.data.deleteButton === '1',
          exportButton: respData.data.exportButton === '1',
          importButton: respData.data.importButton === '1',
          refreshButton: respData.data.refreshButton === '1'
        }
        resolve()
      }, null)
      )
    },
    queryLayout() {
      const _this = this
      this.layout = []
      this.fetch(this.manageApiType(this.basePath, 'LAYOUT'), null, null, respData => {
        for (let key in respData.data) {
          const fieldTemp = respData.data[key]
          const field = {
            ...fieldTemp,
            custom: fieldTemp.custom === '1',
            hidden: fieldTemp.hidden === '1',
            idField: fieldTemp.idField === '1',
            pidField: fieldTemp.pidField === '1',
            readOnly: fieldTemp.readOnly === '1',
            required: fieldTemp.required === '1',
            upload: fieldTemp.upload === '1',
            writeOnly: fieldTemp.writeOnly === '1'
          }
          let width = this.calculateWidth(field.displayName)
          width = width < 40 ? 40 : width
          _this.layout.push({
            key: key,
            titleWidth: width,
            width: width,
            ...field
          })
          console.log(field)
          _this.calculateTableWidth(_this.layout)
          if (field.reference !== null && field !== '') {
            if (field.dataType === this.dataType.select) {
              _this.getDict(field.reference).then(resp => {
                _this.optionMap.set(field.property, resp)
                this.$forceUpdate()
              })
            } else if (field.dataType === this.dataType.cascader) {
              _this.getDictTree(field.reference).then(resp => {
                _this.optionMap.set(field.property, resp)
                this.$forceUpdate()
              })
            }
          }
          if (field.required) {
            _this.$set(_this.rules, field.property, [{
              required: field.required,
              message: '请输入' + field.displayName,
              trigger: 'blur'
            }])
          }
        }
      }, null)
    },
    calculateTableWidth(arr) {
      this.tableClientWidth = document.getElementsByClassName('el-table__body-wrapper')[0].clientWidth
      let sumArr = arr.map(item => {
        return item.width || item.titleWidth
      })
      this.tableSumWidth = sumArr.reduce((prev, curr) => prev + curr) + 170
    },
    getLayoutDisplay(property) {
      for (const index in this.layout) {
        if (this.layout[index].property === property) {
          return this.layout[index].displayName
        }
      }
      return null
    },
    getLayoutDataType(property) {
      for (const index in this.layout) {
        if (this.layout[index].property === property) {
          return this.layout[index].dataType
        }
      }
      return 'STRING'
    },
    getOptionMapValueByLabel(label, option) {
      console.log(label)
      console.log(option)
      for (const index in option) {
        if (option[index].label === label) {
          return option[index].value
        }
      }
    },
    formatDict() {
      for (let index in this.dataList) {
        for (let layout of this.layout) {
          if (layout.dataType === this.dataType.select) {
            this.dataList[index][layout.property] = this.getOptionMapLabelByValue(this.dataList[index][layout.property], this.optionMap.get(layout.property))
          }
        }
      }
    },
    getOptionMapLabelByValue(value, option) {
      for (const index in option) {
        if (option[index].value === value) {
          return option[index].label
        }
      }
    },
    calculateDataWidth(dataList) {
      let widthMap = new Map()
      for (let key in this.layout) {
        widthMap.set(this.layout[key].property, this.layout[key])
        this.layout[key].width = this.layout[key].titleWidth
      }
      for (let dataIndex in dataList) {
        const data = dataList[dataIndex]
        widthMap.forEach((value, property) => {
          if (value.dataType === this.dataType.html) {
            this.calculateHtmlWidth(data[property], (width) => {
              value.width = value.width > width ? value.width : width
            })
          } else {
            let width = this.calculateWidth(data[property])
            value.width = value.width > width ? value.width : width
          }
        })
      }
    },
    calculateWidth(content) {
      const dom = document.createElement('span')
      dom.style.display = 'inline-block'
      dom.style.padding = '10px'
      dom.textContent = content
      document.body.appendChild(dom)
      const width = dom.offsetWidth
      document.body.removeChild(dom)
      return width
    },
    calculateHtmlWidth(content, callback) {
      const dom = document.createElement('p')
      dom.style.width = 'fit-content'
      dom.style.padding = '10px'
      dom.innerHTML = content
      document.body.appendChild(dom)
      setTimeout(() => {
        const width = dom.offsetWidth
        document.body.removeChild(dom)
        callback(width)
      }, 1)
    },
    /** ===========表头配置============= **/

    /** ===========搜索条件列表============= **/
    initConditionRelationMap() {
      this.conditionRelationMap[''] = [EQUAL, NOT_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL, IS_NULL, NOT_NULL, LIKE, MULTI, NOT_MULTI]
      this.conditionRelationMap[this.dataType.input] = [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, LIKE]
      this.conditionRelationMap[this.dataType.inputNumber] = [EQUAL, NOT_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL, IS_NULL, NOT_NULL]
      this.conditionRelationMap[this.dataType.boolean] = [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL]
      this.conditionRelationMap[this.dataType.select] = [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, MULTI, NOT_MULTI]
      this.conditionRelationMap[this.dataType.cascader] = [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, MULTI, NOT_MULTI]
      this.conditionRelationMap[this.dataType.date] = [BETWEEN_OR_EQUAL, BETWEEN, NOT_BETWEEN, NOT_BETWEEN_AND_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL]
      this.conditionRelationMap[this.dataType.datetime] = [BETWEEN_OR_EQUAL, BETWEEN, NOT_BETWEEN, NOT_BETWEEN_AND_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL]
      this.conditionRelationMap[this.dataType.upload] = [LIKE]
      this.conditionRelationMap[this.dataType.html] = [LIKE]
      this.conditionRelationMap[this.dataType.textArea] = [LIKE]
    },
    getConditionRelationDisplay(type) {
      for (const index in this.conditionRelationMap['']) {
        if (this.conditionRelationMap[''][index].value === type) {
          return this.conditionRelationMap[''][index].display
        }
      }
    },
    initCondition() {
      const param = {
        id: this.model.id
      }
      this.fetch(this.manageApiType(this.basePath, 'GET_CONDITION'), param, null, respData => {
        this.conditionList = respData.data || []
      })
    },
    /** ===========搜索条件列表============= **/

    /** ===========搜索列表数据============= **/
    queryData() {
      const _this = this
      let param = this.isAdmin() ? {...this.defaultQueryParam} : {valid: '1', ...this.defaultQueryParam}
      const body = {
        conditionList: this.conditionList.concat(this.defaultConditionParam || []),
        sort: this.sortCondition,
        currentPage: this.page.current,
        pageSize: this.page.size
      }
      if (this.isNotEmpty(this.customerQueryFunction)) {
        this.$emit(this.customerQueryFunction, param, body, respData => {
          this.dataList = respData.data.info
          this.page.total = parseInt(respData.data.totalSize)
          this.formatDict()
          this.calculateDataWidth(_this.dataList)
          this.calculateTableWidth(_this.layout)
          this.currentRow = null
        })
      } else {
        this.fetch(this.manageApiType(this.basePath, 'QUERY'), param, body, respData => {
          this.dataList = respData.data.info
          this.page.total = parseInt(respData.data.totalSize)
          this.$emit('handleQueryData', respData.data.info)
          this.formatDict()
          this.calculateDataWidth(_this.dataList)
          this.calculateTableWidth(_this.layout)
          this.currentRow = null
        }, null)
      }
    },
    handleCurrentPageChange(val) {
      this.page.current = val
      this.queryData()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.queryData()
    },
    exportQueryData() {
      const body = {
        conditionList: this.conditionList,
        sort: this.sortCondition
      }
      this.download(this.manageApiType(this.basePath, 'EXPORT'), this.model.name + '-' + (new Date()).getTime() + '.xlsx', null, body, null, null)
    },
    /** ===========搜索列表数据============= **/

    /** ===========刷新缓存============= **/
    refresh() {
      const _this = this
      _this.fetch(this.manageApiType(this.basePath, 'REFRESH'), null, null, function (responseData) {
        _this.$store.dispatch('RefreshDict').then(() => {
        })
        _this.$alert('系统参数已刷新', '', {
          confirmButtonText: '确定',
          center: true
        })
        _this.changeTipsVisible = false
      }, null)
    },
    /** ===========刷新缓存============= **/

    /** ===========数据导入=========== **/
    downloadTemplate() {
      this.download(this.manageApiType(this.basePath, 'TEMPLATE'), this.model.name + '-模板.xlsx', null, null, null, null)
    },
    uploadExcel(file) {
      let fileObject
      if (file instanceof File) {
        fileObject = file
      } else {
        fileObject = file.file
      }
      let formData = new FormData()
      formData.append('file', fileObject)
      const _this = this
      _this.upload(this.manageApiType(this.basePath, 'UPLOAD'), null, formData, () => {
        this.sync.real = 0
        this.sync.compensation = 0
        this.sync.percent = this.sync.real + this.sync.compensation
        this.sync.visible = true
        _this.sync.timer = setInterval(this.syncProgress, 2000)
      }, null)
    },
    syncProgress() {
      const _this = this
      this.sync.visible = true
      this.fetch(this.manageApiType(this.basePath, 'PROGRESS'), null, null, resp => {
        if (_this.sync.real === parseFloat(resp.data.result)) {
          if (_this.sync.percent <= 10) {
            _this.sync.compensation += 0.01
            _this.sync.percent = parseFloat((_this.sync.real + _this.sync.compensation).toFixed(2))
          }
        } else {
          _this.sync.compensation = 0.0
          _this.sync.real = parseFloat(resp.data.result)
          _this.sync.percent = parseFloat((_this.sync.real + _this.sync.compensation).toFixed(2))
        }
        if (this.isEmpty(resp.data.result)) {
          clearInterval(_this.sync.timer)
          _this.sync.visible = false
        } else if (resp.data.result === '100') {
          _this.$message({
            showClose: true,
            message: '导入成功',
            type: 'success',
            duration: 2000
          })
          _this.changeTipsVisible = true
          this.queryData()
        } else if (resp.data.result === '-1') {
          _this.$message.error('导入失败')
          this.queryData()
        }
      }, null, null, true)
    },
    /** ===========数据导入=========== **/

    /** ===========修改数据Dialog 左侧 字段属性=========== **/
    editDialogOpen(type) {
      if (this.model.readOnly) {
        return
      }
      this.editDialog.type = type
      if (this.editDialog.type === 'ADD') {
        console.log(this.addButton)
        this.addButton.function('ADD')
      } else if (this.editDialog.type === 'MODIFY') {
        this.modifyButton.function('MODIFY', this.currentRow)
      } else if (this.editDialog.type === 'COPY') {
        this.copyButton.function('COPY', this.currentRow)
      }
      this.editDialog.visible = true
    },
    addButtonHandler(type) {
      this.editDialog.editData = {}
      this.editDialog.title = '新增'
      this.configEditDialogTreeConfig(type)
    },
    modifyButtonHandler(type) {
      for (let key in this.currentRow) {
        if (this.getLayoutDataType(key) === this.dataType.select) {
          this.editDialog.editData[key] =
            this.getOptionMapValueByLabel(this.currentRow[key], this.optionMap.get(key))
        } else {
          this.editDialog.editData[key] = this.currentRow[key]
        }
      }
      this.editDialog.title = '修改'
      this.configEditDialogTreeConfig(type)
    },
    copyButtonHandler(type) {
      console.log(this.currentRow)
      for (let key in this.currentRow) {
        if (this.getLayoutDataType(key) === this.dataType.select) {
          this.editDialog.editData[key] =
            this.getOptionMapValueByLabel(this.currentRow[key], this.optionMap.get(key))
        } else {
          this.editDialog.editData[key] = this.currentRow[key]
        }
      }
      this.editDialog.editData[this.model.idField] = null
      this.editDialog.title = '复制'
      this.configEditDialogTreeConfig(type)
    },
    editDialogConfirm() {
      this.$refs['editDialogForm'].validate((valid) => {
        if (valid) {
          if (this.editDialog.type === 'ADD') {
            this.addData(this.editDialog.editData)
          } else if (this.editDialog.type === 'MODIFY') {
            this.updateData(this.editDialog.editData)
          } else if (this.editDialog.type === 'COPY') {
            this.addData(this.editDialog.editData)
          }
          this.editDialogClose()
        }
      })
    },
    addData(data) {
      const _this = this
      _this.fetch(this.manageApiType(this.basePath, 'ADD'), null, data, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.model.name + '新增条目成功',
          type: 'success',
          duration: 2000
        })
        _this.changeTipsVisible = true
        _this.queryData()
        _this.queryTree()
      }, null)
    },
    updateData(data) {
      const _this = this
      _this.fetch(this.manageApiType(this.basePath, 'UPDATE'), null, data, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.model.name + '修改成功',
          type: 'success',
          duration: 2000
        })
        _this.changeTipsVisible = true
        _this.queryData()
        _this.queryTree()
      }, null)
    },
    uploadData(file) {
      const type = this.basePath
      let fileObject
      if (file instanceof File) {
        fileObject = file
      } else {
        fileObject = file.file
      }
      let formData = new FormData()
      formData.append('file', fileObject)
      const _this = this
      const param = {
        fileName: fileObject.name,
        type: type
      }
      _this.upload(_this.apiType.common.uploadOss, param, formData, (resp) => {
        file.onSuccess(resp.data.data.url)
      }, null)
    },
    handleUploadSuccess(res, file) {
      this.editDialog.editData[this.editDialog.currentUploadProperty] = res
      this.editDialog.currentUploadProperty = ''
    },
    editDialogClose() {
      this.editDialog.visible = false
      this.editDialog.editData = {}
    },
    /** ===========修改数据Dialog 左侧 字段属性=========== **/

    /** ===========修改数据Dialog 右侧 树状结构=========== **/
    queryTree() {
      if (!this.model.treeFormat) {
        return
      }
      const _this = this
      _this.fetch(this.manageApiType(this.basePath, 'TREE'), null, null, respData => {
        _this.dataTree = respData.data || []
      }, null)
    },
    // 找到所有下属id, 选择父分类时不可选
    buildSubIdArray() {
      const id = this.currentRow[this.model.idField]
      const treeItem = this.findTreeItem(this.dataTree, id, undefined)
      this.editDialog.tree.subIdArray = [id]
      this.findSubIdArray(this.editDialog.tree.subIdArray, treeItem.subList)
    },
    // 通过当前id找到树节点
    findTreeItem(tree, id, result) {
      for (let index in tree) {
        if (tree[index].id === id) {
          return tree[index]
        }
        if (Array.isArray(tree[index].subList)) {
          const res = this.findTreeItem(tree[index].subList, id, result)
          if (res != null) {
            result = res
          }
          if (result !== undefined) {
            return result
          }
        }
      }
      return null
    },
    findSubIdArray(array, subList) {
      if (subList != null) {
        subList.forEach(item => {
          array.push(item.id)
          this.findSubIdArray(array, item.subList)
        })
      }
    },
    // 选择父分类时, 自身及下属id不可选
    editDialogTreeFilterNode(value, data) {
      if (value.includes(data.id)) {
        this.$set(data, 'disabled', true)
      } else {
        this.$set(data, 'disabled', false)
      }
      return true
    },
    // 只选一个
    editDialogTreeCheckedChange(checkedNodes, checkedKeys) {
      if (checkedKeys.checkedKeys.indexOf(checkedNodes.id) === -1) {
        this.$refs.editDialogTree.setCheckedKeys([], true)
        this.$set(this.editDialog.editData, this.model.pidField, undefined)
      } else {
        this.$refs.editDialogTree.setCheckedKeys([checkedNodes.id], true)
        this.$set(this.editDialog.editData, this.model.pidField, checkedNodes.id)
      }
    },
    // 配置树节点选中及展开状态
    configEditDialogTreeConfig(type) {
      if (!this.model.treeFormat) {
        return
      }
      if (type === 'ADD') {
        this.$nextTick(() => {
          this.$refs.editDialogTree.setCheckedKeys([])
          this.$refs.editDialogTree.filter([])
        })
      } else if (type === 'MODIFY') {
        this.editDialog.tree.expandedKeys = this.editDialog.editData[this.model.pidField] ? [this.editDialog.editData[this.model.pidField]] : []
        this.editDialog.tree.checkedKeys = this.editDialog.editData[this.model.pidField] ? [this.editDialog.editData[this.model.pidField]] : []
        this.$nextTick(() => {
          this.$refs.editDialogTree.setCheckedKeys(this.editDialog.tree.checkedKeys)
          this.buildSubIdArray()
          this.$refs.editDialogTree.filter(this.editDialog.tree.subIdArray)
        })
      } else if (type === 'COPY') {
        this.editDialog.tree.expandedKeys = this.editDialog.editData[this.model.pidField] ? [this.editDialog.editData[this.model.pidField]] : []
        this.editDialog.tree.checkedKeys = this.editDialog.editData[this.model.pidField] ? [this.editDialog.editData[this.model.pidField]] : []
        this.$nextTick(() => {
          this.$refs.editDialogTree.setCheckedKeys(this.editDialog.tree.checkedKeys)
          this.$refs.editDialogTree.filter([])
        })
      }
    },
    /** ===========修改数据Dialog 右侧 树状结构=========== **/

    /** ===========失效按钮=========== **/
    handleDisable() {
      this.$confirm('此操作将是该记录失效, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.disableButton.funcation(this.currentRow)
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消'
        })
      })
    },
    disableButtonHandler() {
      this.disableData()
    },
    disableData() {
      const _this = this
      let absolute = '0'
      let id = this.currentRow[this.model.idField]
      this.layout.forEach(l => {
        if (l.property === 'id') {
          id = this.currentRow[l.property]
        }
      })
      const param = {
        id: id,
        absolute: absolute
      }
      _this.fetch(this.manageApiType(this.basePath, 'DELETE'), param, null, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.model.name + '删除成功',
          type: 'success',
          duration: 2000
        })
        _this.changeTipsVisible = true
        _this.queryData()
        _this.queryTree()
      }, null)
    },
    /** ===========失效按钮=========== **/

    /** ===========删除按钮=========== **/
    handleDelete() {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteButton.function(this.currentRow)
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消'
        })
      })
    },
    deleteButtonHandler() {
      this.deleteData()
    },
    deleteData() {
      const _this = this
      let absolute = '1'
      let id = this.currentRow[this.model.idField]
      this.layout.forEach(l => {
        if (l.property === 'id') {
          id = this.currentRow[l.property]
        }
      })
      const param = {
        id: id,
        absolute: absolute
      }
      _this.fetch(this.manageApiType(this.basePath, 'DELETE'), param, null, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.model.name + '删除成功',
          type: 'success',
          duration: 2000
        })
        _this.changeTipsVisible = true
        _this.queryData()
        _this.queryTree()
      }, null)
    },
    /** ===========删除按钮=========== **/

    /** ===========数据表操作=========== **/
    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex
    },
    handleCurrentChange(currentRow, oldCurrentRow) {
      this.currentRow = currentRow
      if (!this.multiSelect) {
        this.$emit('handleCurrentChange', currentRow, oldCurrentRow)
      }
    },
    handleSelectionChange(val) {
      if (this.multiSelect) {
        this.$emit('handleSelectionChange', val)
      }
    },
    handleSortChange(column) {
      if (column.order === null) {
        this.sortCondition.type = null
      } else {
        this.sortCondition.property = column.prop
        if (column.order === 'ascending') {
          this.sortCondition.type = 0
        } else {
          this.sortCondition.type = 1
        }
      }
      this.queryData()
    },
    /** ===========数据表操作=========== **/

    /* 表格内按钮操作 */
    handleOperate(index) {
      this.buttonList[index].function(this.currentRow)
    }
  }
}
</script>

<style lang="scss">
.conditionItem .el-form-item__content {
  display: flex;
  margin-left: 50px !important;
  padding-top: 5px;
}

.conditionItem .el-form-item__label {
  padding: 12px 10px 4px 10px;
}

.conditionItem .el-input__inner {
  height: 32px;
}

.conditionItem .el-input-group__prepend {
  background-color: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 5px 0 5px;
}

.conditionItem .prepend {
  background-color: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 6px;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  white-space: nowrap;
}

.conditionItem .el-input-group__append {
  background-color: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 5px 0 5px;
}

.conditionItem .el-button--mini {
  background-color: #F5F7FA;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 5px 0 5px;
  height: 32px;
  width: 32px;
}

.conditionItem .conditionItemField {
  max-width: 200px;
}

.conditionItem .conditionItemField .el-input__inner {
  height: 32px !important;
}

.conditionItem .conditionItemType {
  max-width: 100px;
}

.conditionItem .conditionItemType .el-input__inner {
  height: 32px !important;
}

.conditionItem .conditionItemType .el-cascader .el-input .el-input__inner {
  width: 300px;
}

.conditionItem .el-cascader .el-input .el-input__inner {
  width: 300px;
}

.editDialogForm {
  margin-bottom: 10px;
}

.editDialogForm .el-input__inner {
  height: 32px !important;
}

.editDialogForm .el-switch {
  padding-top: 12px;
}

.editDialogForm .el-form-item--medium .el-form-item__label {
  padding: 12px 10px 4px 10px;
}

.bindTransfer {
  display: inline-block;
}

.bindTransfer .el-transfer-panel {
  width: 350px;
}

.bindTransfer .transfer-footer {
  margin-left: 20px;
}

.popover {
  height: 59px;
  padding: 0;
  padding-top: 10px;
  text-align: center;
  color: tomato;

  .el-popover__title {
    margin-bottom: 8px;
    font-weight: 500;
  }
}

.exportButton {
  display: inline-block;
}
</style>
